<template>
	<view class="content">
		<view class="search">
			<view class="titles">
				<text class="cn">站线选择</text>
				<text class="en">Station Line Selection</text>
			</view>
			<view class="your-place">
				<location-selector
				      :location-options="station"
				      :destination-options="station"
				      :initial-location-index="1"
				      :initial-destination-index="2"
				      @location-change="onLocationChange"
				      @destination-change="onDestinationChange"
				    />
			</view>
			<view class="searchbtn">
				<text class="cn">查询</text>
				<text class="en">QUERY</text>
			</view>
		</view>
		<view class="lines-box">
			<view class="list-box">
				<view class="step">
					<uni-steps :options="[{title: '事件一'}, {title: '事件二'}, {title: '事件三'}, {title: '事件四'}]" :active="1"></uni-steps>
				</view>
			</view>
			<view class="list-box">
				<view class="top-box">
					<view class="left">
						<view class="imgs">
							<image src="/static/img/bus.png" mode="widthFix"></image>
						</view>
						<view class="texts">
							<text class="top-title">金属工厂</text>
							<text class="top-title En">Metal Plant</text>
						</view>
					</view>
					<view class="right">
						<text class="top-title">240 M</text>
					</view>
				</view>
				<view class="bus-box">
					<view class="item-box">
						<view class="cn">
							<text>金属</text>
							<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
							<text>胶架</text>
							<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
							<text>零件</text>
							<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
							<text>物流中心</text>
						</view>
						<view class="en">
							<text>Metal</text>
							<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
							<text>Acetate</text>
							<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
							<text>Decoration</text>
							<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
							<text>DC</text>
						</view>
					</view>
					<view class="item-box">
						<view class="cn second">
							<text>30秒</text>
						</view>
						<view class="en">
							<text>30s</text>
						</view>
					</view>
					<view class="item-box">
						<image src="/static/img/stard9.png" class="star" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="list-box">
				<view class="top-box">
					<view class="left">
						<view class="imgs">
							<image src="/static/img/bus.png" mode="widthFix"></image>
						</view>
						<view class="texts">
							<text class="top-title">金属工厂</text>
							<text class="top-title En">Metal Plant</text>
						</view>
					</view>
					<view class="right">
						<text class="top-title">240 M</text>
					</view>
				</view>
				<view class="bus-box">
					<view class="item-box">
						<view class="cn">
							<text>金属</text>
							<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
							<text>胶架</text>
							<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
							<text>零件</text>
							<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
							<text>物流中心</text>
						</view>
						<view class="en">
							<text>Metal</text>
							<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
							<text>Acetate</text>
							<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
							<text>Decoration</text>
							<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
							<text>DC</text>
						</view>
					</view>
					<view class="item-box">
						<view class="cn second">
							<text>30秒</text>
						</view>
						<view class="en">
							<text>30s</text>
						</view>
					</view>
					<view class="item-box">
						<image src="/static/img/star.png" class="star" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="list-box">
				<view class="top-box">
					<view class="left">
						<view class="imgs">
							<image src="/static/img/bus.png" mode="widthFix"></image>
						</view>
						<view class="texts">
							<text class="top-title">金属工厂</text>
							<text class="top-title En">Metal Plant</text>
						</view>
					</view>
					<view class="right">
						<text class="top-title">240 M</text>
					</view>
				</view>
				<view class="bus-box">
					<view class="item-box">
						<view class="cn">
							<text>金属</text>
							<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
							<text>胶架</text>
							<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
							<text>零件</text>
							<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
							<text>物流中心</text>
						</view>
						<view class="en">
							<text>Metal</text>
							<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
							<text>Acetate</text>
							<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
							<text>Decoration</text>
							<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
							<text>DC</text>
						</view>
					</view>
					<view class="item-box">
						<view class="cn second">
							<text>30秒</text>
						</view>
						<view class="en">
							<text>30s</text>
						</view>
					</view>
					<view class="item-box">
						<image src="/static/img/stard9.png" class="star" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import LocationSelector from '@/components/LocationSelector.vue'
	export default {
		components: {
		    LocationSelector
		},
		data() {
			return {
				latitude: 39.908823, 
				longitude: 116.397470,
				scale: 16,
				station: [
						{ value: 0, text: "请选择您的站点" },
						{ value: 1, text: "金属工厂" },
						{ value: 2, text: "胶架工厂" },
						{ value: 3, text: "零件工厂" },
						{ value: 4, text: "物流中心" },
				],
			}
		},
		methods: {
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						this.latitude = res.latitude
						this.longitude = res.longitude
					},
					fail: err => {
						uni.showToast({
							title: '获取位置失败',
							icon: 'none'
						})
						console.error('定位失败:', err)
					}
				})
			}
		},
		onLoad() {
			this.getLocation()
		}
	}
</script>
<style>
	.content{display: flex;flex-direction: column;height: 100vh;}
	.search{width: 100%;flex: 1;}
	.search .titles{display: flex;flex-direction: row;padding: 10px 0 10px 20px;background: #F6F6F6;}
	.search .titles .cn{font-size: 16px;}
	.search .titles .en{font-size: 16px;margin-left: 10px;}
	.searchbtn{display: flex;flex-direction: row;width: 90%;margin: 10px auto;background: #7C643C;border-radius: 5px;color: #fff;font-size: 16px;justify-content: center;padding: 10px 0 10px 0;}
	.searchbtn .en{margin-left: 5px;} 
	.lines-box{width: 100%;background: #fff;height: 60vh;position: absolute;bottom: 0;border-top-right-radius: 10px;border-top-left-radius: 20px;top: 35vh;}
	.list-box{display: flex;flex-direction: column;padding-top: 10px;}
	.top-box{display: flex;flex-direction: row;justify-content: space-between;}
	.top-box .left{display: flex;flex-direction: row;align-items: center;gap: 10px;margin-left: 20px;justify-content: start;gap: 10px;}
	.top-box .left .texts .top-title{color: #000;font-weight: 600;font-size: 14px;}
	.top-box .left .texts .En{color: #7C643C;font-size: 12px;font-weight: 400;margin-left: 5px;}
	.top-box .right .top-title{color: #7C643C;font-size: 14px;font-weight: 400;margin-left: 5px;}
	.top-box .right{margin-right: 20px;}
	.imgs{display: flex;align-items: center;justify-content: center;background: #7C643C;width: 30px;height: 30px;border-radius: 30px;}
	.imgs image{width: 20px;}
	.bus-box{display: flex;flex-direction: row;justify-content: space-between;padding: 10px 20px 0 20px;align-items: center;border-bottom: 1px solid #D9D9D9;padding-bottom: 10px;}
	.item-box .cn,.en{display: flex;flex-direction: row;align-items: center;gap: 3px;}
	.item-box .en{margin-top: 5px;}
	.item-box .en text{color: #7C643C;font-size: 12px;}
	.item-box .cn text{color: #7C643C;font-size: 14px;}
	.item-box .second{width: 40px;}
	.item-box .star{width: 30px;}
	.arrow-right{width: 20px;}
	.step{width: 100%;padding-top: 30px;border-bottom: 1px solid #D9D9D9;}
</style>